<template>
  <div class="container">
    <el-dialog
      width="500px"
      :title="dialog.dialogType === 1 ? 'OCR识别上传发票' : '源文件上传发票'"
      center
      :lock-scroll="true"
      :visible.sync="dialog.dialogVisible"
      @open="getData"
      @close="hideDialog"
    >
      <el-select
        style="width: 400px;"
        clearable
        v-model="inside.value"
        :multiple="false"
        filterable
        remote
        center
        reserve-keyword
        placeholder="请选择供应商"
        :remote-method="insideRemoteMethod"
        :loading="inside.loading"
      >
        <el-option
          v-for="item in inside.list"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-upload
        v-if="inside.value"
        style="margin-top: 10px;"
        class="upload-demo"
        action="#"
        :on-remove="handleRemove"
        :multiple="false"
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList"
        :http-request="handlePreview"
      >
        <el-button size="small" type="primary">发票上传</el-button>
      </el-upload>
      <el-button
        style="margin-top: 10px;"
        v-else
        type="primary"
        @click="insideConfirm()"
        >发票上传</el-button
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getSupplierOptions } from "@/api/bill";
import { getToken } from '@/utils/auth'
export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      inside: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      },
      fileList: [],
      files: []
    };
  },
  created() {
    
  },
  methods: {
    //获取修改数据
    getData() {
      this.getSupplierList();
    },
    // 嵌套搜索供应商数据
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getSupplierList(query);
      } else {
        this.inside.options = [];
      }
    },
    //获取供应商数据
    getSupplierList(query = "") {
      let data = {
        supplier_code: query,
        page: 1,
        limit: 50
      };
      this.inside.loading = true;
      getSupplierOptions(data).then(res => {
        this.inside.list = res.data.options.data.map(item => {
          return { value: `${item.code}`, label: `${item.name}(${item.code})` };
        });
        this.inside.loading = false;
      });
    },
    //OCR发票上传
    confirm() {
      let data = new window.FormData();
      for (let i = 0; i < this.files.length; i++) {
        data.append('files[]', this.files[i]);
      }
      data.append("supplier_code", this.inside.value);
      data.append("os", 1);
      this.$axios.defaults.headers.common['X-Token'] = getToken() ? getToken() : ''
      if (this.dialog.dialogType == 1) {
        this.$axios.post("/api/Invoicexd/yonParse", data).then(res => {
          if (res.data.code == 0) {
            this.$message({
              message: res.data.message || res.data.msg,
              type: "success"
            });
            this.$emit("updateData");
            this.hideDialog();
          } else {
            this.$message({
              type: "info",
              message: res.data.msg
            });
          }
        });
      } else {
        data.append("type", 1);
        this.$axios.post("/api/Invoicexd/yonUpload", data).then(res => {
          if (res.data.code == 0) {
            this.$message({
              message: res.data.message || res.data.msg,
              type: "success"
            });
            this.$emit("updateData");
            this.hideDialog();
          } else {
            this.$message({
              type: "info",
              message: res.data.msg
            });
          }
        });
      }
    },
    insideConfirm() {
      this.$message({
        type: "info",
        message: "请选择供应商"
      });
    },
    handleRemove(file, fileList) {
      // console.log(file,fileList,77777);
      this.fileList = [];
      this.files = [];
    },
    handlePreview(file) {
      // console.log(file,9999);
      this.files.push(file.file);
    },
    handleExceed(files, fileList) {
      // console.log(files,fileList,66666);
      this.$message({
        type: "info",
        message: "发票已上传，请删除已上传发票"
      });
    },

    hideDialog() {
      this.inside = {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      };
      this.fileList = [];
      this.files = [];
      this.dialog.dialogVisible = false;
    }
  }
};
</script>
<style scoped>
.top {
  position: relative;
  /* height: 40px; */
}
</style>
